<!-- 我的银行卡 -->
<template>
	<view class="container">
		<view class="list-box">
			<view class="list-item">
				<view class="bank-info">
					<view class="bank-info-left">
						<image src="../../static/images/bank_logo.png"></image>
					</view>
					<view class="bank-info-right">
						<view class="bank-name">招商银行</view>
						<view class="bank-type">储值卡</view>
					</view>
				</view>
				<view class="bank-card">
					<view class="bank-card-no">****</view>
					<view class="bank-card-no">****</view>
					<view class="bank-card-no">****</view>
					<view class="bank-card-no">0140</view>
				</view>
			</view>

			<view class="list-item">
				<view class="bank-info">
					<view class="bank-info-left">
						<image src="../../static/images/bank_logo.png"></image>
					</view>
					<view class="bank-info-right">
						<view class="bank-name">招商银行</view>
						<view class="bank-type">储值卡</view>
					</view>
				</view>
				<view class="bank-card">
					<view class="bank-card-no">****</view>
					<view class="bank-card-no">****</view>
					<view class="bank-card-no">****</view>
					<view class="bank-card-no">0140</view>
				</view>
			</view>

			<view class="list-item">
				<view class="bank-info">
					<view class="bank-info-left">
						<image src="../../static/images/bank_logo.png"></image>
					</view>
					<view class="bank-info-right">
						<view class="bank-name">招商银行</view>
						<view class="bank-type">储值卡</view>
					</view>
				</view>
				<view class="bank-card">
					<view class="bank-card-no">****</view>
					<view class="bank-card-no">****</view>
					<view class="bank-card-no">****</view>
					<view class="bank-card-no">0140</view>
				</view>
			</view>
			<view class="submit-btn" @tap="goBankAdd">
				<view class="submit-btn-plus">+</view>
				<view class="submit-btn-title">添加银行卡</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			goBankAdd() {
				uni.navigateTo({
					url: '/pages/bank_card_add/bank_card_add'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #eeeeee;
	}

	.container {
		width: 750rpx;
		height: auto;
	}

	.list-box {
		display: flex;
		flex-direction: column;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 27rpx;
		width: 702rpx;
		height: auto;
	}

	.list-item {
		width: 702rpx;
		height: 234rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 18rpx;
	}

	.bank-info {
		display: flex;
		flex-direction: row;
		height: 156rpx;
	}

	.bank-card {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		align-content: center;
		margin-left: 96rpx;
	}

	.bank-card-no {
		height: 39rpx;
		font-family: SourceHanSansCN-Regular;
		font-size: 40rpx;
		letter-spacing: 0rpx;
		color: #333333;
	}

	.bank-info-left {
		display: flex;
		flex-direction: column;
		margin-top: 32rpx;
		margin-left: 60rpx;
	}

	.bank-info-left image {
		width: 103rpx;
		height: 102rpx;
	}

	.bank-info-right {
		display: flex;
		flex-direction: column;
		margin-top: 2rpx;
		margin-left: 26rpx;
		justify-content: center;
		/* align-items: center; */
		/* align-content: center; */
	}

	.bank-name {
		font-family: SourceHanSansCN-Regular;
		font-size: 30rpx;
		letter-spacing: 0rpx;
		color: #333333;
		margin-bottom: 8rpx;
	}

	.bank-type {
		font-family: SourceHanSansCN-Regular;
		font-size: 24rpx;
		letter-spacing: 0rpx;
		color: #666666;
	}

	.submit-btn {
		width: 702rpx;
		height: 180rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		margin-bottom: 14rpx;
		justify-content: center;
		align-items: center;
		align-content: center;
		color: #5683ec;
	}

	.submit-btn-plus {
		font-size: 74rpx;
		padding-right: 6rpx;
		margin-bottom: 6rpx;
	}

	.submit-btn-title {
		font-size: 36rpx;
	}
</style>
